<head>
    <meta charset="utf-8">
    <meta http-equiv="content-script-type" content="text/javascript">
    <script type="text/javascript" src=/static/js/jquery-1.7.1.min.js></script>
    <script type="text/javascript" src=/static/js/echarts-all.js></script>
    <title>{{uname}}</title>
</head>
<body>
	<h1 align="center">Data from MySQL!</h1>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script type="text/javascript">
    $(document).ready(function(){
        $("button.jqueryTest").click(function(){
            alert("hello");
            $("a.abc").hide();
        }); 
    });

    </script>

    <script type="text/javascript">
	
		//var d =  {{coats}}
        // 路径配置

        //var d = [20,20,50,20,20]
        var myChart = echarts.init(document.getElementById('main')); 
                
        var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":{{data}}
                        }
                    ]
        };
        
                // 为echarts对象加载数据 
        myChart.setOption(option); 

    function addId(obj){
        spstr = obj.href;
        strs = spstr.split('/');
        id = strs[strs.length-1];
        //id = spstr[spstr.length-1];
        id++;
        obj.href = spstr.substr(0,spstr.length-id.length)+id;


    } 
    function delId(obj){
        spstr = obj.href;
        strs = spstr.split('/');
        id = strs[strs.length-1];
        if (id>0)
        {
            id--;
        }
        obj.href = spstr.substr(0,spstr.length-id.length)+id;
    }
   
    function number(){
        var obj=document.getElementById('mySelect');
        var index=obj.selectedIndex; //序号，取当前选中选项的序号
        var val = obj.options[index].value;
    }
    </script>
    <p>
    <a href="{{ the_url }}" onclick="addId(this)"> 
    下一页
    </a>
    </p>

    <p >
    <a  class="abc" href="{{ the_url }}" onclick="delId(this)"> 
    上一页
    </a>
    </P>

    <li><a href="/demo/5000">demo</a></li>

    <li><a href="{%url 'testname' 23%}">testurlname</a></li>

    <li><button class="jqueryTest">demo1</button></li>

    <select id="mySelect">  
    <option value="daf">1</option>  
    <option>2</option>  
    <option>3</option>  
    <option>4</option>  
    </select>  
    <a href="{{ the_url }}"> 
        <input type="button" name="button" value="查看结果" onclick="number();">
    </a>  
</body>